<%--
  Created by IntelliJ IDEA.
  User: 邓程
  Date: 2021/10/1
  Time: 16:22
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>邮箱登陆验证</title>
    <link rel="stylesheet" href="../../boot/plugin/layui/css/layui.css">
    <script type="text/javascript" src="../../boot/plugin/layui/layui.js"></script>
    <script type="text/javascript" src="http://47.100.102.177:8080/app/plugin/jquery.min.js"></script>
    <style type="text/css">
        body{
            background-image: url("http://47.100.102.177:8080/app/images/login/街的对面%20海边可爱女生插画4k壁纸_彼岸图网.jpg");
            background-size: cover;
        }
        .container{
            width: 420px;
            height: 320px;
            min-height: 320px;
            max-height: 320px;
            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            padding: 20px;
            z-index: 130;
            border-radius: 8px;
            background-color: #fff;
            box-shadow: 0 3px 18px rgba(100, 0, 0, .5);
            font-size: 16px;
        }
        .close{
            background-color: white;
            border: none;
            font-size: 18px;
            margin-left: 410px;
            margin-top: -10px;
        }

        .layui-input{
            border-radius: 5px;
            width: 300px;
            height: 40px;
            font-size: 15px;
        }
        .layui-form-item{
            margin-left: -20px;
        }
        #logoid{
            margin-top: -16px;
            padding-left:150px;
            padding-bottom: 15px;
        }
        .layui-btn{
            margin-left: -50px;
            border-radius: 5px;
            font-size: 15px;
        }
        .verity{
            width: 120px;
        }
        .font-set{
            font-size: 13px;
            text-decoration: none;
            margin-left: 100px;
        }
        a:hover{
            text-decoration: underline;
        }

    </style>
</head>
<body>
<form class="layui-form">
    <div class="container">
        <button class="close" title="关闭">X</button>
        <div class="layui-form-mid layui-word-aux">
            <img id="logoid" src="http://47.100.102.177:8080/app/images/common/logo.png" style="width: 150px; height: auto;">
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">邮箱号</label>
            <div class="layui-input-block">
                <input type="text" id="uemail" name="uemail" required  lay-verify="required" placeholder="请输入邮箱号" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">新密码</label>
            <div class="layui-input-block">
                <input type="text" id="npaw" name="npaw" required  lay-verify="required" placeholder="请输入新密码" autocomplete="off" class="layui-input">
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label">验证码</label>
            <button id="ebton" type="button" class="layui-btn">发送验证码</button>

            <div class="layui-input-inline">
                <input type="text" id="ucode" name="ucode" required  lay-verify="required" placeholder="请输入验证码" autocomplete="off" class="layui-input verity">
            </div>
            <!-- <div class="layui-form-mid layui-word-aux">辅助文字</div> -->
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button id="bton" class="layui-btn layui-btn-fluid" type="button">验证</button>
            </div>
        </div>

    </div>

    <%--<input value="${user.userId}">--%>
</form>

<script>
    let b=document.getElementById("bton");
    let e=document.getElementById("ebton");
    let email;
    let code;
    let newPassword;
    e.onclick=()=> {
        email = $("#uemail").val();
        $.post('/boot/users/quire',{account:email},function (res) {
            if(res.code=='404'){
                alert("邮箱不存在")
            }
            else {
                $.get('/boot/users/send',{email:email},function (res) {
                    layer.msg("验证码已发送")
                })
            }
        })
    }

    b.onclick=()=>{
        code=$("#ucode").val();
        newPassword=$("#npaw").val();
        $.post('/boot/users/get',{code:code},function (res) {
            if(res.code=='200'){
                email = $("#uemail").val();
                $.get('/boot/forget/newPassword',{email:email,newPassword:newPassword},function (res1) {
                    if (res1.code=='200'){
                        alert(res1.msg);
                        window.location.href = '/boot/login';
                    }
                });
            }
            else {
                alert(res.msg);
            }
        })
    }

    // 按钮点击之后，会禁用 disabled 为true
    // 同时按钮里面的内容会变化， 注意 button 里面的内容通过 innerHTML修改
    // 里面秒数是有变化的，因此需要用到定时器
    // 定义一个变量，在定时器里面，不断递减
    // 如果变量为0 说明到了时间，我们需要停止定时器，并且复原按钮初始状态
    var time = 30; // 定义剩下的秒数
    e.addEventListener('click', function() {
        li=layer.load(0);
        email = $("#uemail").val();
        $.get('/boot/users/quire',{account:email},function (res) {
            if(res.code==='404'){
                layer.close(li);
                alert("邮箱不存在")
            }
            else {
                $.get('/boot/users/send',{email:email},function (res) {
                    layer.close(li);
                    layer.msg("验证码已发送")
                    e.disabled = true;
                    var timer = setInterval(function() {
                        if (time == 0) {
                            // 清除定时器和复原按钮
                            clearInterval(timer);
                            e.disabled = false;
                            e.innerHTML = '发送验证码';
                            time = 3; // 重新赋值时间变量
                        } else {
                            e.innerHTML = time + '秒后可再次发送';
                            time--;
                        }
                    }, 1000);
                })
            }
        })
    });




</script>
</body>
</html>
